<template>
  <n-card title="评论">
    <template v-if="commentsList.length > 0">
      <template v-for="item in commentsList" :key="item.id">
        <BlockComments
          :name="item.name"
          :browser="item.browser"
          :system="item.system"
          :time="item.time"
          :content="item.content"
          :avatar="item.avatar"
          @reply="reply(item, item.id)"
        >
          <template v-if="item.child">
            <template v-for="childitem in item.child" :key="childitem.id">
              <BlockComments
                :name="childitem.name"
                :browser="childitem.browser"
                :system="childitem.system"
                :time="childitem.time"
                :content="childitem.content"
                :avatar="childitem.avatar"
                @reply="reply(childitem, item.id)"
              >
                <template #contentLeft>
                  <n-gradient-text type="error">
                    @ {{ childitem.reply }}
                  </n-gradient-text>
                </template>
              </BlockComments>
            </template>
          </template>
        </BlockComments>
      </template>
    </template>
    <template v-else>
      <CommentsNo />
    </template>
  </n-card>
  <Dialog v-model:show="dialogShow">
    回复
    <Comments
      :commentsParentId="commentsParentId"
      :replyName="replyName"
      :replyEmail="replyEmail"
      @createAfter="getComment()"
    />
  </Dialog>
</template>

<script setup lang="ts">
import { NCard, NGradientText, NDialog } from "naive-ui";
import {
  findByResourceId as apiCommentFindByResourceId,
  type Comment,
} from "../../api/comments";
const route = useRoute();
interface commentsType {
  id: number;
  avatar: string;
  name: string;
  email: string;
  browser: string;
  system: string;
  time: Date;
  content: string;
  reply?: string;
}
interface commentsListType extends commentsType {
  child?: commentsType[];
}
const commentsList = ref<commentsListType[]>([]);
const dialogShow = ref(false);
const commentsParentId = ref<number>();
const replyName = ref<string>();
const replyEmail = ref<string>();
const reply = (item: commentsType, parent: number) => {
  commentsParentId.value = parent;
  replyName.value = item.name;
  replyEmail.value = item.email;
  dialogShow.value = true;
};
const getComment = async () => {
  const res = await apiCommentFindByResourceId(route.params.id as string);
  if (res?.data) {
    const list: commentsListType[] = res.data.map((item) => {
      return filterFun(item);
    });
    commentsList.value = list;
  }
};
const filterFun = (item: Comment): commentsListType => {
  return {
    id: item.id,
    avatar: item.avatar,
    name: item.name,
    email: item.email,
    browser: parseBrowser(item.ua),
    system: parseOS(item.ua),
    time: item.createTime,
    content: item.content,
    reply: item.replyName,
    child: item.children?.map((citem) => filterFun(citem)),
  };
};
//暴露state和play方法
defineExpose({
  getComment,
});
  getComment();

</script>
<style lang="scss" scoped>
.n-card {
  margin-top: 10px;
}
</style>
